<template>
	<view class="detail-container">
		<!-- 导航栏 -->
		<view class="nav-header">
			<view class="nav-back" @tap="navBack">
				<text class="wlIcon-fanhui1"></text>
			</view>
			<view class="nav-title">推广详情</view>
		</view>
		
		<!-- 主要内容 -->
		<view class="content">
			<!-- 数据卡片 -->
			<view class="data-card">
				<view class="card-title">用户{{ phoneNum ? ' '+phoneNum+' ' : '' }}的推广数据</view>
				
				<view class="data-grid">
					<view class="data-item">
						<view class="item-value">{{ total }}</view>
						<view class="item-label">推广人数</view>
					</view>
					
					<view class="data-item">
						<view class="item-value">¥{{ totalAmount }}</view>
						<view class="item-label">消费总金额</view>
					</view>
				</view>
				
				<view class="update-time" v-if="lastUpdated">最后更新: {{ lastUpdated }}</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		</view>
		
		<!-- 错误提示 -->
		<view class="error-container" v-if="error">
			<text class="error-message">{{ errorMessage }}</text>
			<view class="retry-button" @tap="fetchData">重试</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userId: 0,
			phoneNum: '',
			total: 0,
			totalAmount: '0.00',
			loading: true,
			error: false,
			errorMessage: '加载失败，请重试',
			lastUpdated: ''
		}
	},
	onLoad(options) {
		if (options.userId) {
			this.userId = options.userId;
		} else {
			// 尝试从存储中获取
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo && userInfo.id) {
				this.userId = userInfo.id;
			}
		}
		
		// 获取手机号参数
		if (options.phoneNum) {
			this.phoneNum = options.phoneNum;
		}
		
		this.fetchData();
	},
	onPullDownRefresh() {
		this.fetchData(() => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		navBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		fetchData(callback) {
			this.loading = true;
			this.error = false;
			
			// 获取当前时间（整点）
			const now = new Date();
			// 设置分钟和秒为0，即整点时间
			now.setMinutes(0);
			now.setSeconds(0);
			this.lastUpdated = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:00`;
			
			uni.request({
				url: '/member/user/promotionJuniorList',
				data: {
					user_id: this.userId
				},
				method: 'GET',
				success: res => {
					if (res.data && res.data.code === 1 && res.data.data) {
						const responseData = res.data.data;
						
						// 设置总人数
						this.total = responseData.total || 0;
						
						// 计算消费总金额
						let amount = 0;
						if (responseData.data && Array.isArray(responseData.data)) {
							responseData.data.forEach(item => {
								amount += parseFloat(item.consumption_amount || 0);
							});
						}
						this.totalAmount = amount.toFixed(2);
						this.error = false;
					} else {
						this.error = true;
						this.errorMessage = res.data?.msg || '获取数据失败';
					}
				},
				fail: err => {
					console.error('请求失败:', err);
					this.error = true;
					this.errorMessage = '网络请求失败';
				},
				complete: () => {
					this.loading = false;
					if (typeof callback === 'function') {
						callback();
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
@import "../../../static/other/style/colorui.css";
@import "../../../static/other/style/iconfont.css";

.detail-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	position: relative;
}

.nav-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	height: 90rpx;
	padding: 0 30rpx;
	background: #fff;
	box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
	
	.nav-back {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #333;
		
		text {
			font-size: 36rpx;
			font-weight: bold;
			margin-left: -10rpx;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 80rpx;
	}
}

.content {
	padding: 30rpx;
	margin-top: 90rpx; // 为顶部导航留出空间
}

.data-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
	
	.card-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 30rpx;
		border-left: 6rpx solid #2979ff;
		padding-left: 20rpx;
	}
	
	.data-grid {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		
		.data-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.item-value {
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.item-label {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	
	.update-time {
		font-size: 22rpx;
		color: #999;
		text-align: center;
		margin-top: 20rpx;
	}
}

.loading-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #2979ff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	text {
		font-size: 28rpx;
		color: #666;
	}
}

.error-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.error-message {
		font-size: 28rpx;
		color: #ff3333;
		margin-bottom: 20rpx;
	}
	
	.retry-button {
		padding: 16rpx 36rpx;
		background-color: #2979ff;
		color: #fff;
		border-radius: 40rpx;
		font-size: 26rpx;
	}
}
</style> 